<template>
    <div class="aside">
        <nav>
            <router-link to="/maps">
                <Icon name="iconmaps"/>
                地图
            </router-link>
            <router-link to="/videos">
                <Icon name="iconvideos"/>
                视频
            </router-link>
        </nav>
    </div>
</template>

<script>
	import Icon from '@/components/Icon.vue';

	export default {
		name: 'Aside',
		components: {Icon}
	};
</script>

<style scoped lang="scss">
    .aside {
        position: fixed;
        left: 0;
        top: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        background: rgb(47, 64, 80);
        color: white;
        width: 100px;
        height: 100vh;
        padding: 32px 0;
        z-index: 1;

        nav {
            a {
                display: flex;
                flex-direction: column;
                align-items: center;

                &:nth-child(2) {
                    margin-top: 32px;
                }
            }

        }

    }
</style>